<template>
<div class="integration_schedule_container">
  <div class="header_bar">
    <a-row>
      <a-col :span="18">
        <a-space :size="12">
          <a-input-search
            allowClear
            :placeholder="$t('请输入指标编码')"
            v-model="pager.queryParams.F_indicatorCode_like"
            @search="querySearch"
          />
          <a-input-search
            allowClear
            :placeholder="$t('请输入指标名称')"
            v-model="pager.queryParams.F_indicatorName_like"
            @search="querySearch"
          />
          <a-input-search
            allowClear
            :placeholder="$t('请输入表编码')"
            v-model="pager.queryParams.F_tableCode_like"
            @search="querySearch"
          />
        </a-space>
      </a-col>
      <a-col :span="6" align="right">
        <a-space :size="12">
          <a-button type="primary" @click="querySearch">{{$t('查询')}}</a-button>
          <a-button type="primary" @click="toBatchExecute">{{$t('执行一次')}}</a-button>
          <a-button type="primary" @click="toEdit({})">{{$t('新建集成调度')}}</a-button>
        </a-space>
      </a-col>
    </a-row>
  </div>
  <div class="data_container">
    <div class="table_list">
      <vxe-table
        ref="tableList"
        show-overflow
        show-header-overflow
        border
        resizable
        :loading="loading"
        :row-config="{ isHover: true }"
        :data="dataList"
        height="auto"
      >
        <vxe-column
          type="checkbox"
          width="90"
          align="center"
        ></vxe-column>
        <vxe-column
          type="seq"
          :title="$t('序号')"
          width="50"
          align="center"
        >
        </vxe-column>
        <vxe-column
          field="jobName"
          :title="$t('流程名称')"
          min-width="160"
        >
        </vxe-column>
        <vxe-column
          field="jobDesc"
          :title="$t('任务名称')"
          min-width="160"
        >
          <template #default="{ row }">
            {{ row.scheduleJob ? row.scheduleJob.jobDesc : "--" }}
          </template>
        </vxe-column>
        <vxe-column
          field="scheduleType"
          :title="$t('调度类型')"
          width="120"
        >
          <template #default="{ row }">
            {{ row.scheduleJob ? getScheduleType(row.scheduleJob.scheduleType) : "--" }}
          </template>
        </vxe-column>
        <vxe-column
          field="indicatorCode"
          :title="$t('指标代码')"
          min-width="140"
        >
          <template #default="{ row }">
            {{ row.tableDto ? (row.tableDto.indicatorList || []).map(item => item.indicatorCode).join(",") : "--" }}
          </template>
        </vxe-column>
        <vxe-column
          field="indicatorName"
          :title="$t('指标名称')"
          min-width="140"
        >
          <template #default="{ row }">
            {{ row.tableDto ? (row.tableDto.indicatorList || []).map(item => item.indicatorName).join(",") : "--" }}
          </template>
        </vxe-column>
        <vxe-column
          field="tableName"
          :title="$t('模型名称')"
          width="140"
        >
          <template #default="{ row }">
            {{ row.tableDto ? row.tableDto.tableName : "--" }}
          </template>
        </vxe-column>
        <vxe-column
          field="updateTime"
          :title="$t('更新时间')"
          width="140"
        >
          <template #default="{ row }">
            {{ row.updateTime || row.createTime }}
          </template>
        </vxe-column>
        <vxe-column
          :title="$t('操作')"
          align="center"
          fixed="right"
          width="240"
        >
          <template #default="{ row }">
            <a-button type="link" @click="toEdit(row)">{{ $t('编辑') }}</a-button>
            <a-button type="link">{{ $t('模型') }}</a-button>
            <a-button type="link" @click="toLog(row)">{{ $t('日志') }}</a-button>
            <a-button type="link">{{ $t('指标导览') }}</a-button>
            <a-popconfirm
              :title="$t('确认要删除吗')"
              :ok-text="$t('是')"
              :cancel-text="$t('否')"
              @confirm="toDel(row)"
            >
              <a-button type="link" class="a_danger">{{ $t('删除') }}</a-button>
            </a-popconfirm>
          </template>
        </vxe-column>
        <template #empty>
          <a-empty
            :image-style="{
              height: '80px',
            }"
          >
            <span slot="description">{{ $t('暂无数据') }}</span>
          </a-empty>
        </template>
      </vxe-table>
    </div>
    <vxe-pager
      background
      :current-page.sync="pager.pageNum"
      :page-size.sync="pager.pageSize"
      :total="total"
      @page-change="getList"
      :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'FullJump']"
    >
    </vxe-pager>
  </div>

  <batchExecute
    :show.sync="executeInfo.show"
    :info="executeInfo.info"
    @callback="getList"
  />

  <taskLog
    v-model="logInfo.show"
    :info="logInfo.info"
  />

  <inteScheduleDesign
    :show.sync="editInfo.show"
    :inteScheduleInfo="editInfo.info"
    @change="getList"
  ></inteScheduleDesign>
  
</div>
</template>

<script>

const batchExecute = require("./batchExecute").default;
const { taskLog } = require("w-vue-schedule/publicComponents");
const inteScheduleDesign = require("./inteScheduleDesign").default;
const $dataIntegration = require("w-vue-chongqing/src/api/dataIntegration");

export default {
  components: {
    batchExecute,
    taskLog,
    inteScheduleDesign
  },
  data() {
    return {
      loading: false,
      scheduleList: [
        {
          label: '周期',
          value: 'CRON',
        },
        {
          label: '手动',
          value: 'MANUAL',
        },
        {
          label: '实时',
          value: 'REALTIME',
        },
      ],
      total: 0,
      pager: {
        pageNum: 1,
        pageSize: 15,
        queryParams: {
          F_jobType_eq: "job",
          F_isDel_eq: 0,
          F_indicatorName_like: undefined,
          F_indicatorCode_like: undefined,
          F_tableCode_like: undefined
        }
      },
      dataList: [],
      editInfo: {
        show: false,
        info: {}
      },
      executeInfo: {
        show: false,
        info: []
      },
      logInfo: {
        show: false,
        info: {}
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**
     * @Author: y_zp
     * @description: 获取列表
     */
    getList() {
      this.loading = true;
      $dataIntegration.getDtJobList({ ...this.pager }).then(req => {
        this.total = Number(req.count);
        this.dataList = req.data;
      }).finally(() => {
        this.loading = false;
      });
    },
    /**
     * @Author: y_zp
     * @description: 查询
     */
    querySearch() {
      this.pager.pageNum = 1;
      this.getList();
    },
    getScheduleType(val) {
      let item = this.scheduleList.find((item) => item.value === val);
      return item.label;
    },
    /**
     * @Author: y_zp
     * @description: 编辑
     */
    toEdit(row) {
      this.editInfo = {
        show: true,
        info: { ...row }
      }
    },
    /**
     * @Author: y_zp
     * @description: 删除
     */
    toDel(row) {
      $dataIntegration.deleteTransferJob({ ...row, _X_ROW_KEY: undefined }).then(req => {
        this.$message.success($t('删除成功'));
        this.getList();
      });
    },
    /**
     * @Author: y_zp
     * @description: 执行调度
     */
    toBatchExecute() {
      let list = this.$refs.tableList.getCheckboxRecords();
      if (list.length == 0) {
        this.$message.warn($t('请选择需要执行的任务'));
        return false;
      } else {
        this.executeInfo = {
          show: true,
          info: list,
        };
      }
    },
    /**
     * @Author: y_zp
     * @description: 查看日志
     */
    toLog(row) {
      this.logInfo = {
        show: true,
        info: { id: row.scheduleJob.jobInfoId },
      };
    },
    
  }
};
</script>
<style lang="less" scoped>
.integration_schedule_container {
  height: 100%;
  background: #fff;
  .header_bar {
    height: 50px;
    line-height: 50px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
    border-bottom: 1px solid #e9e9e9;
    padding: 0 12px;
    .ant-input-search {
      width: 180px;
    }
  }
  .data_container {
    padding: 12px;
  }
  .table_list {
    height: calc(100vh - 230px);
  }
}
</style>